<template>
	<view>
		<uni-popup ref="popupcheck" type="bottom" @touchmove.stop.prevent="moveHandle">
			<view style="background: #fff;">
				<view
					style="display: flex;background: #fff;padding: 15px;width: calc(100% - 10px);box-sizing: border-box;margin-left: 5px;justify-content: space-between;font-size: 14px;font-weight: bold;">
					<view style="color: blue;font-size: 14px;float: right;"></view>
					{{ title }}
					<view class="close" style="color: #000;font-size: 14px;float: right;" @click="reset">重置</view>
				</view>
				<!-- 	<uni-search-bar @confirm="search" v-model="searchValue" @clear="hobby = data"
					@cancel="hobby = data"></uni-search-bar> -->
				<view
					:class="{ 'active50': TheDataByDicKeyListData.length == 2, 'active70': TheDataByDicKeyListData.length == 3 }"
					style="padding-left: 10rpx;">
					<uni-data-checkbox :customType="customType" showType="parentSon" selectedColor="#d1100a"
						:map="{ text: 'text', value: 'value' }" emptyText="暂无数据" mode="tag" v-model="defaultActiveData"
						:localdata="TheDataByDicKeyListData" @change="change">
					</uni-data-checkbox>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
import {
	BaseProjectTheDataByDicKey,
} from "../pages/interface.js"
//不想双向绑定了
export default {
	props: {
		parentObj: {
			type: Object
		}
	},
	data() {
		return {
			title: "", //选择的类型标题
			customType: "", //用于判断当前点击的条件类型
			defaultActiveData: "", //默认选中参数结果类型
			TheDataByDicKeyListData: [], //弹窗参数列表数据
			searchValue: '', //搜索关键词
			entity:{},
		}
	},
	methods: {
		moveHandle() { },
		// 搜索
		search(e) {
			let arr = []
			this.data.forEach(item => {
				let newStr = item.NickName + item.Name + item.Phone
				item.newStr = newStr
				console.log('循环', item, item.NickName, item.Name, item.Phone, '-----    ' + item.newStr)
				if (item.newStr.indexOf(e.value) != -1) {
					arr.push(item)
				}
			})
			this.hobby = arr
		},
		open(entity, type, title) {
			console.log('获取弹窗过来的参数', entity, type)
			this.entity = entity;
			this.title = title
			this.customType = type
			this.searchValue = "" //清空搜索框
			this.defaultActiveData = "" //清空选中的选项
			this.TheDataByDicKeyListData = []
			this.GetTheDataByDicKeyListData(entity, type)
			this.$refs.popupcheck.open() //打开弹窗

		},
		close() {
			this.searchValue = ''
			this.$refs.popupcheck.close()
		},
		reset() {
			this.$emit('subclickRow','', this.customType)
			this.close()
		},
		change(e) {
			console.log('选择数据改变', e, this.customType)
			this.checkboxRows = e.detail.data
			this.$emit('subclickRow', this.checkboxRows, this.customType)
			this.close()
		},
		submit() {
			this.$emit('subclickRow', this.checkboxRows, this.customType)
			this.$emit('subclickId', this.checkbox)
			this.$refs.popupcheck.close()
		},
		GetTheDataByDicKeyListData(entity, type) { //获取选择参数列表
			console.log('调用接口参数', entity, type)
			BaseProjectTheDataByDicKey({
				Condition: 'DicKey',
				Keyword: type
			}).then((res) => {
				if (res.Success) {
					if (res.Data.DictionaryDetailsList == null) {
						// let arr = [{
						// 	text: "暂无数据",
						// 	value: 0
						// }]
						this.TheDataByDicKeyListData = []
						return
					}
					let DictionaryDetailsList = res.Data.DictionaryDetailsList
					let newDictionaryDetailsList = DictionaryDetailsList.map(item => {
						return {
							text: item.DicValue,
							value: item.Id
						}
					})
					this.TheDataByDicKeyListData = newDictionaryDetailsList
					console.log('获取类型结果----', newDictionaryDetailsList)
				} else {
					// let arr = [{
					// 	text: "暂无数据" ,
					// 	value: 0
					// }]
					this.TheDataByDicKeyListData = []
					return
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.active50 {
	width: 50%;
	margin: 0 auto;
}

.active70 {
	width: 80%;
	margin: 0 auto;
}

.close {
	&:active {
		background-color: #f1f1f1;
	}
}

::v-deep.checklist-group {
	display: block !important;
	width: 100%;
	height: 40vh;
	padding: 0px 10px 10px 10px;

	box-sizing: border-box;
	text-align: center;
	overflow-y: scroll;
}

::v-deep.checklist-box {
	display: block !important;
	margin: 5px !important;
}

::v-deep.checklist-content {

	display: block !important;
}</style>